import React, {ComponentType, useMemo, useState} from 'react';
import {View, Text, StyleSheet, Image, ViewStyle} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/Ionicons';
import {User} from 'types';
import {screenWidth} from 'utils/constants';
interface PropsType {
  style: ViewStyle;
  PrefixIcon: () => JSX.Element;
  prefixText: string;
  iconList: User[];
  showAll?: boolean;
}
export default function DetailBar({
  style,
  PrefixIcon,
  prefixText,
  iconList,
  showAll,
}: PropsType) {
  const maxCount = Math.floor((screenWidth - 127) / 31);
  const [showAllBtn, setShowAllBtn] = useState(!showAll);
  const data = useMemo(() => {
    if (showAllBtn && iconList.length > maxCount) {
      return {list: iconList.slice(0, maxCount - 2), showMoreBtn: true};
    } else {
      return {list: [...iconList], showMoreBtn: false};
    }
  }, [showAllBtn, iconList, maxCount]);
  return (
    <View style={style}>
      <View style={barStyles.barContainer}>
        <View style={barStyles.prefixContainer}>
          <PrefixIcon />
          <Text style={barStyles.prefixText}>{prefixText}</Text>
        </View>
        <View style={barStyles.avatarContainer}>
          {data.list.map((item, idx) => {
            return (
              <Image
                key={item.id + idx}
                style={barStyles.avatar}
                source={{uri: item.avatar}}
              />
            );
          })}
          {data.showMoreBtn && (
            <TouchableOpacity
              style={barStyles.avatar}
              onPress={() => setShowAllBtn(false)}>
              <Icon
                name="chevron-down-circle-outline"
                size={24}
                color="#AC8EC9"
              />
            </TouchableOpacity>
          )}
        </View>
      </View>
    </View>
  );
}
const barStyles = StyleSheet.create({
  barContainer: {
    flexDirection: 'row',
  },
  prefixContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    width: 87,
    height: 24,
  },
  prefixText: {
    color: '#67616D',
    marginLeft: 5,
  },
  avatarContainer: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginLeft: 10,
  },
  avatar: {
    flex: 0,
    width: 24,
    height: 24,
    borderRadius: 12,
    marginLeft: 7,
  },
  location: {
    fontSize: 14,
    color: '#67616D',
  },
  locationDetail: {
    fontSize: 12,
    color: '#67616D',
  },
});
